
import React from 'react'
import {Form,Message,Input,Modal} from 'antd'
import Store from "./Store";
import {observer} from 'mobx-react'
import {Creat} from "../../../../api/work/config/cloud/CloudApi";

@observer
class ComForm extends React.Component{
    constructor(props) {
        super(props);
        this.state = {}
    }

    // 处理提交
    handleSubmit = () => {
        Store.confirmLoading = true;
        this.props.form.validateFields((error,formData) => {
            if (!error){
                formData["id"] = Store.record.id;
                Creat(formData).then(response => {
                    if (response.data.code === 200){
                        Store.fetchRecords();
                        Message.success(response.data.msg);
                        Store.formVisible = false;
                    }
                }).finally(() => Store.confirmLoading = false)
            }
        })
    };

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <Modal
                visible
                width={800}
                maskClosable={false}
                title={Store.record.id ? '编辑云图' : '新建云图'}
                okText="提交"
                onCancel={() => Store.formVisible = false}
                confirmLoading={Store.confirmLoading}
                onOk={this.handleSubmit}>
                <Form labelCol={{span: 6}} wrapperCol={{span: 14}}>
                    <Form.Item required label="云图名称">
                        {getFieldDecorator('name', {initialValue: Store.record.name,rules:[{required:true,message:"云图名称不能为空"}]})(
                            <Input placeholder="请输入云图名称"/>
                        )}
                    </Form.Item>
                    <Form.Item required label="描述">
                        {getFieldDecorator('description', {initialValue: Store.record.description,rules:[{required:true,message:"描述不能为空"}]})(
                            <Input placeholder="请输入描述"/>
                        )}
                    </Form.Item>
                </Form>
            </Modal>
        );
    }
}

export default Form.create()(ComForm)
